<template>
    <el-tooltip  v-if="!tipsDisabled" :enterable="enterable" effect="dark" :placement="placement">
        <div slot="content" v-html="tips"></div>
        <div>
          <el-button :icon="icon" :style="{width:setW+'px'}" @click="handleClick" :type="btnType" :class="[{small:isSmall,add:isAdd,del:isDel,new:isNew,normal:isNormal,icon_button:!isNormal&&!isNew&&!isSmall}]" :disabled="disabled">
              <svg-icon :class="[{svgSmall:isSmall,svgNor:isNormal,svgBtn:!isNormal&&!isSmall&&!disabled}]" :icon-class="icon" :class-name="icon" />
              <span class="span-label">{{label}}</span>
          </el-button>
        </div>
    </el-tooltip>
    <div v-else>
        <el-button :icon="icon" :style="{width:setW+'px'}" @click="handleClick" :type="btnType"  :class="[{small:isSmall,add:isAdd,del:isDel,new:isNew,normal:isNormal,icon_button:!isNormal&&!isNew&&!isSmal}]"  :disabled="disabled">
            <svg-icon  :class="[{svgSmall:isSmall,svgNor:isNormal,svgBtn:!isNormal&&!isSmall&&!disabled}]" :icon-class="icon" :class-name="icon" />
            <span class="span-label">{{label}}</span>
        </el-button>
    </div>
</template>

<script>
export default {
  name: "tips_button",
  props: {
    disabled: {
      type: Boolean
    },
    label: {
      type: String
    },
    placement: {
      type: String
    },
    icon: {
      type: String,
      default: "404"
    },
    tips: {
      type: String,
      default: "按钮"
    },
    tipsDisabled: {
      type: Boolean,
      default: false
    },
    enterable: {
      type: Boolean,
      default: false
    },
    isAdd: {
      type: Boolean,
      default: false
    },
    isDel: {
      type: Boolean,
      default: false
    },
    isNormal: {
      type: Boolean,
      default: false
    },
    isNew: {
      type: Boolean,
      default: false
    },
    isSmall: {
      type: Boolean,
      default: false
    },
    setW: String,
    btnType: {
      type: String,
      default: "primary"
    }
  },

  mounted() {},
  methods: {
    handleClick(event) {
      if (!this.disabled) {
        this.$emit("click", event);
      }
    }
  }
};
</script>

<style scoped>
.span-label {
  position: absolute;
  top: 7px;
  left: 35px;
}

.svgNor {
  fill: #555555;
  width: 25px;
  height: 25px;
  margin-right: 2px;
}

.svgSmall {
  fill: #555555;
  width: 20px;
  height: 20px;
}

.small {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  padding: 0;
  position: relative;
}

.new {
  width: 80px;
  height: 30px;
  border-radius: 4px;
  padding-top: 2px;
  padding-left: 5px;
  font-size: 14px;
  text-align: left;
  font-weight: 400;
  position: relative;
}

.normal {
  width: 80px;
  height: 30px;
  border-radius: 4px;
  padding-top: 2px;
  padding-left: 5px;
  font-size: 14px;
  text-align: left;
  font-weight: 400;
  position: relative;
}

.icon_button {
  padding: 0px !important;
  /* padding: 0 0 -1px 0 !important; */
  width: 30px;
  height: 25px;
  position: relative;
}

.add {
  fill: #fff;
  background-color: rgba(103, 194, 58, 1);
  border-color: rgba(103, 194, 58, 1);
  padding-right: 1.2px !important;
}

.del {
  fill: #fff;
  background-color: rgba(245, 108, 108, 1);
  border-color: rgba(245, 108, 108, 1);
}

.svgBtn {
  fill: #fff;
  width: 25px;
  height: 25px;
  margin-left: 0px;
}
</style>

